import React from "react";
import TYPE from "@design/constant/component-type";
import InputItem from "./components/InputItem";
import Datepicker from './components/Datepicker';
import Textarea from './components/Textarea';
import schema from "./schema";
import Upload from "./components/Upload";
import Checkbox, { Radio } from './components/Checkbox';
import Select from "./components/Select";
import Approval from "./components/Approval";
import Divider from "./components/Divider";

export default function() {
  return {
    schema,
    renderBlock: (props) => {
      const { type } = props.node;
      switch (type) {
        case TYPE.TEXT_INPUT:
          return (
            <div>
              <InputItem node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.DIVIDER:
          return(
            <div>
              <Divider node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.DATEPICKER:
          return (
            <div>
              <Datepicker node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.TEXT_AREA:
          return(
            <div>
              <Textarea node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.UPLOAD:
          return(
            <div>
              <Upload node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.CHECKBOX:
          return(
            <div>
              <Checkbox node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.RADIO:
          return(
            <div>
              <Radio node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.SELECT:
          return(
            <div>
              <Select node={props.node} {...props.attributes} />
            </div>
          );
        case TYPE.APPROVAL:
          return(
            <div>
              <Approval node={props.node} {...props.attributes} />
            </div>
          );
        default:
          return <div>{props.node.data.get("column")}</div>;
      }
    },
  };
}
